/**
 * 博客文章卡片组件
 * 用于在文章列表中展示单篇文章的预览信息
 * 包含标题、摘要、标签、作者、发布时间等信息
 */

'use client';

import Link from 'next/link';
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Calendar, User } from 'lucide-react';
import { BlogPost } from '@/lib/types';

// 组件属性接口
interface BlogCardProps {
  post: BlogPost;  // 博客文章数据
}

/**
 * 博客文章卡片组件
 * @param post 博客文章数据对象
 * @returns JSX 元素
 */
export default function BlogCard({ post }: BlogCardProps) {
  /**
   * 格式化日期为中文格式
   * @param dateString ISO 日期字符串
   * @returns 格式化的中文日期字符串
   */
  const formatDate = (dateString: string) => {
    return new Date(dateString).toLocaleDateString('zh-CN', {
      year: 'numeric',    // 显示年份
      month: 'long',      // 显示完整月份名称
      day: 'numeric'      // 显示日期
    });
  };

  return (
    <Card className="group hover:shadow-lg transition-shadow duration-200">
      {/* 卡片头部 - 标题和状态 */}
      <CardHeader>
        <div className="flex items-center justify-between">
          {/* 文章标题，支持悬停效果和链接跳转 */}
          <CardTitle className="group-hover:text-primary transition-colors">
            <Link href={`/blog/${post.slug}`}>
              {post.title}
            </Link>
          </CardTitle>
          {/* 文章状态标签 */}
          <Badge variant={post.status === 'published' ? 'default' : 'secondary'}>
            {post.status === 'published' ? '已发布' : '草稿'}
          </Badge>
        </div>
        {/* 文章摘要，限制显示行数 */}
        <CardDescription className="line-clamp-2">
          {post.excerpt}
        </CardDescription>
      </CardHeader>
      
      {/* 卡片内容 - 标签列表 */}
      <CardContent>
        <div className="flex flex-wrap gap-2 mb-4">
          {post.tags.map((tag) => (
            <Badge key={tag} variant="outline" className="text-xs">
              {tag}
            </Badge>
          ))}
        </div>
      </CardContent>
      
      {/* 卡片底部 - 作者信息和操作按钮 */}
      <CardFooter className="flex items-center justify-between text-sm text-muted-foreground">
        <div className="flex items-center space-x-4">
          {/* 作者信息 */}
          <div className="flex items-center space-x-1">
            <User className="h-4 w-4" />
            <span>{post.author}</span>
          </div>
          {/* 发布时间 */}
          <div className="flex items-center space-x-1">
            <Calendar className="h-4 w-4" />
            <span>{formatDate(post.publishedAt)}</span>
          </div>
        </div>
        {/* 阅读更多链接 */}
        <Link 
          href={`/blog/${post.slug}`}
          className="text-primary hover:underline"
        >
          阅读更多 →
        </Link>
      </CardFooter>
    </Card>
  );
}
